<template>
  <div>
    <div class="detail-body">
      <div class="detail-main">
        <div class="detail-main-left">
          <Avatar
            shape="square"
            :src="detailRow.face"
            @on-error="(val)=>val.target.src = require('@/assets/communityimg/avatar.png')"
            icon="ios-person"
            size="80"
          />
        </div>
        <div class="detail-main-right">
          <div class="detail-main-title">{{ detailRow.title }}</div>
          <div class="detail-main-author">
            <span>{{ detailRow.nick_name }}</span>
            <span>发布了</span>
          </div>
          <div class="detail-main-content">
            {{ detailRow.content }}
          </div>
          <div
            v-if="detailRow.imgList"
            :class="[
              'my-view',
              { 'my-view1': detailRow.imgList.length == 1 },
              { 'my-view2': detailRow.imgList.length == 2 },
              { 'my-view3': detailRow.imgList.length == 3 },
              { 'my-view4': detailRow.imgList.length == 4 },
              { 'my-view5': detailRow.imgList.length == 5 },
              { 'my-view5': detailRow.imgList.length == 6 },
              { 'my-view6': detailRow.imgList.length >= 7 },
            ]"
          >
            <img
              :src="item"
              v-for="(item, index) in detailRow.imgList"
              :key="index"
            />
          </div>
        </div>
      </div>
      <div class="detail-func">
        <div @click="handleCollect">
          <!-- <Icon v-if="detailRow.isCollect" color="#FDCD10" type="md-star" />
          <Icon v-else type="md-star-outline" />
          <span>{{ detailRow.is_sc || 0 }}</span> -->
          <Icon :type="detailRow.havesc===1? 'md-star':'ios-star-outline'"
             :color="detailRow.havesc===1?'#FDCD10':''" /> <span>{{ detailRow.is_sc }}</span>
        </div>
        <div @click="handleShare">
          <Icon v-if="detailRow.isShare" color="#FDCD10" type="ios-share-alt" />
          <Icon v-else type="ios-share-alt-outline" />
          <span> {{ detailRow.is_zf || 0 }}</span>
        </div>
        <div @click="handleText">
          <Icon v-if="detailRow.isMessage" color="#FDCD10" type="ios-text" />
          <Icon v-else type="ios-text-outline" />
          <span> {{ detailRow.is_comits || 0 }}</span>
        </div>
        <div @click="handleLike">
          <Icon
            v-if="detailRow.havedz"
            color="#FDCD10"
            type="ios-thumbs-up"
          />
          <Icon v-else type="ios-thumbs-up-outline"/>
          <span> {{ detailRow.is_like || 0 }}</span>
        </div>
      </div>
      <div class="detail-reply">
        <Input
          v-model="reply"
          maxlength="100"
          show-word-limit
          :autosize="{ minRows: 3, maxRows: 3 }"
          type="textarea"
          placeholder="请输入回复内容"
        />
        <Button
          type="primary"
          @click="handleSend"
          shape="circle"
          icon="ios-create"
          >发表评价</Button
        >
      </div>
      <div class="detail-text">
        <div class="detail-text-title">
          <div class="detail-title">评论（{{ dataList.length }}）</div>
          <div class="detail-title-sort">
            <span
              :style="{
                color: sort_type == 1 ? '#FF5C58' : '#2E2E30',
              }"
              @click="handleSort(1)"
              >按时间 </span
            >|
            <span
              :style="{ color: sort_type == 0 ? '#FF5C58' : '#2E2E30' }"
              @click="handleSort(0)"
              >按热度</span
            >
          </div>
        </div>
        <div class="detail-text-content">
          <div
            class="detail-text-item"
            v-for="(item, index) in dataList"
            :key="index"
          >
            <div class="detail-text-item-left">
              <Avatar :src="item.face"
              @on-error="(val)=>val.target.src = require('@/assets/communityimg/avatar.png')"
               icon="ios-person" size="60" />
            </div>
            <div class="detail-text-item-right">
              <div class="detail-text-up-row">
                <span>{{ item.nick_name || "--" }}</span>
                <span>{{ item.createime || "--/--/--" }}</span>
              </div>
              <div class="detail-text-up-row">{{ item.content }}</div>
              <div class="detail-text-reply">
                <div @click="handleReply(item)">
                  <Icon type="ios-text-outline" />
                  <span> {{item.is_comits}}</span>
                </div>
                <div @click="handleCommentLike(item)">
                  <Icon type="ios-thumbs-up-outline" />
                  <span> {{item.is_like}}</span>
                </div>
              </div>
              <div  v-show="item.showInput" style="display: flex;flex-direction: column;align-items: flex-end;">
                <Input v-model="replyMsg" :autosize="{minRows: 2}"
                type="textarea" :placeholder="'回复'+item.nick_name" />
                <div style="margin-top: 20px">
                  <Button style="margin-right: 10px" size="small" @click="handleCancelReply(item)">取消</Button>
                  <Button type="error" size="small" @click="handleSubmitReply(item)">确定</Button>
                </div>
              </div>

              <div class="detail-text-up-row" v-for="(v,i) in item.childs.childs" :key="i">
                <span>{{ v.nick_name || "--" }}</span>
                <div class="detail-text-up-row">{{ v.content }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { seedetail, replaycomits,setdlc,likecomment } from "@/api/community";

import { time } from "@/config/time";
export default {
  name: "circle-detail",
  data() {
    return {
      replyMsg: '',
      params: {
        order: "createTime",
        page: 1,
        rows: 10000,
      },
      sort_type: 1,
      detailRow: {},
      reply: "", //回复内容
      dataList: [], //评论列表
      mid: JSON.parse(localStorage.userInfo).id,
      topicId: false,
    };
  },
  created() {},
  mounted() {
    this.topicId = this.$route.query.id;
    this.getTopicInfo();
  },

  methods: {
    // 获取圈子详情
    getTopicInfo() {
      let data = {
        mid: this.mid,
        id: this.topicId,
        sort_type: this.sort_type,
        // page: 1,
        // pagesize: 1,
      };
      seedetail(data).then((res) => {
        if (res.code == 1) {
          this.detailRow = res.data;
          if (res.data.thumbs) {
            this.detailRow.imgList = res.data.thumbs.split(",");
          }

          this.dataList = res.comments.map(v=> {
            v.createime = time.getallTime(v.createime);
            return v
          })
        }
      });
    },
    // 收藏
    handleCollect() {
      this.handleSetdlc(2)
    },
    // 分享
    handleShare() {
      this.handleSetdlc(3)
    },
    // 评论
    handleText() {
      return
    },
    handleCommentLike(item){
        likecomment({
          cid: item.id,
          mid: this.mid,
        }).then(res => {
        if(res.code === 1) {
          this.getTopicInfo()
        }
      })
    },
    // 点赞这条圈子
    // 1 点赞 2收藏3转发
    handleLike() {
      this.handleSetdlc(1)
    },
    handleSetdlc(type) {
      setdlc({
        topicid:this.detailRow.id,
        type: type,
        mid:this.mid
      }).then(res => {
        if(res.code === 1) {
          this.getTopicInfo()
        }
      })
    },
    // 点赞
    handleThumb() {
      this.detailRow.isThumbs = !this.detailRow.isThumbs;
      this.$Message.success("点赞");
      this.getData();
    },
    handleCancelReply(item) {
      item.showInput = false
      this.$forceUpdate()
    },
    handleSubmitReply(item) {

      if(!this.replyMsg) {
        this.$Message.error('请输入回复')
        return
      }
  let data = {
        cid: item.id,
        mid: this.mid,
        topicid: this.topicId,
        content: this.replyMsg,
      };
      replaycomits(data).then((res) => {
        if (res.code == 1) {
          this.getTopicInfo();
          this.replyMsg = "";
          item.showInput = false
          this.$forceUpdate()
        }
      });
    },

    // 回复
    handleReply(item) {
      this.replyMsg = "";
      item.showInput = true
      this.$forceUpdate()

    },
    // 发送评论
    handleSend() {
      if(!this.reply) {
        this.$Message.error('请输入评论')
        return
      }
      let data = {
        cid: 0,
        mid: this.mid,
        topicid: this.topicId,
        content: this.reply,
      };
      replaycomits(data).then((res) => {
        if (res.code == 1) {
          this.getTopicInfo();
          this.reply = "";
        }
      });
      // this.$Message.success("发表成功");

    },
    // 排序
    handleSort(v) {
     this.sort_type  =v
      this.getTopicInfo();
    },
    // 获取评论数据列表
    getData() {
      console.log("获取评论");
    },
  },
};
</script>

<style lang="scss" scoped>
.detail-body {
  background-color: #fff;
  padding: 1.25rem;
  height: calc(100vh - 2.5rem);
  overflow: hidden auto;
  border-radius: 0.625rem;
  .detail-main {
    display: flex;
    &-left {
      width: 5rem;
      margin: 1.875rem;
      .ivu-avatar > img {
        width: 5rem;
        height: 5rem;
        border-radius: 0.625rem;
        background-color: #cccccc;
      }
    }
    &-right {
      padding: 1.25rem 1.25rem 1.25rem 0;
      flex: 1;
      .detail-main-title {
        font-size: 1.125rem;
        font-weight: 600;
      }
      .detail-main-author {
        height: 2.5rem;
        line-height: 2.5rem;
        color: #343434;
        > span:first-child {
          font-weight: 600;
          margin-right: 0.625rem;
        }
        > span:last-child {
          color: #b7b7b9;
        }
      }
      .detail-main-content {
        min-height: 3.125rem;
      }
      .my-view {
        display: grid;
        grid-column-gap: 0.625rem;
        grid-row-gap: 0.625rem;
        > img {
          width: 100%;
          object-fit: cover;
          border-radius: 0.625rem;
        }
      }
      .my-view1 {
        grid-template-columns: repeat(1, 50%);
        grid-template-rows: repeat(1, 100%);
        > img {
          height: 15.625rem;
        }
      }
      .my-view2 {
        grid-template-columns: repeat(2, 35%);
        grid-template-rows: repeat(1, 100%);
        > img {
          height: 12.5rem;
        }
      }
      .my-view3 {
        grid-template-columns: repeat(3, 26%);
        grid-template-rows: repeat(1, 100%);
        > img {
          height: 10rem;
        }
      }
      .my-view4 {
        grid-template-columns: repeat(2, 35%);
        grid-template-rows: repeat(2, 50%);
        > img {
          height: 12.5rem;
        }
      }
      .my-view5 {
        grid-template-columns: repeat(3, 26%);
        grid-template-rows: repeat(2, 50%);
        > img {
          height: 10rem;
        }
      }
      .my-view6 {
        grid-template-columns: repeat(3, 26%);
        grid-template-rows: repeat(3, 32%);
        > img {
          height: 10rem;
        }
      }
    }
  }
  .detail-func {
    width: 100%;
    display: flex;
    justify-content: space-around;
    padding-bottom: 1.875rem;
    > div {
      color: #949195;
      padding: 0.625rem;
      cursor: pointer;
      font-size: 1.5rem;
      > span {
        font-size: 1rem;
      }
    }
  }
  .detail-reply {
    min-height: 3.125rem;
    display: flex;
    justify-items: center;
    textarea.ivu-input {
      resize: none;
    }
    > .ivu-btn {
      margin: auto 1.25rem;
    }
  }
  .detail-text {
    &-title {
      display: flex;
      justify-content: space-between;
      color: #2e2e30;
      line-height: 3.125rem;
      font-size: 0.875rem;
      border-bottom: 1px solid #f3f3f3;
      .detail-title {
        font-weight: 600;
      }
      .detail-title-sort span {
        cursor: pointer;
      }
    }
    &-content {
      .detail-text-item {
        padding: 1.25rem;
        border-bottom: 1px solid #f3f3f3;
        display: flex;
        &-left {
          width: 3.75rem;
          margin: 0 1.25rem;
          .ivu-avatar > img {
            width: 5rem;
            height: 5rem;
            border-radius: 0.625rem;
            background-color: #cccccc;
          }
        }
        &-right {
          flex: 1;
          .detail-text-up-row {
            font-size: 1rem;
            color: #878487;
            > span:first-child {
              font-size: 1.125rem;
              font-weight: 600;
              color: #2e2e30;
            }
            > span:last-child {
              color: #949195;
              font-size: 1rem;
              margin-left: 0.625rem;
            }
          }
          .detail-text-reply {
            text-align: right;
            > div {
              cursor: pointer;
              padding: 0 0.625rem;
              text-align: center;
              display: inline-block;
              font-size: 1.25rem;
              > span {
                font-size: 0.875rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>
